<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Copyright 2008 David Selby dave6502@googlemail.com

This file is part of kmotion.

kmotion is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

kmotion is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with kmotion.  If not, see <http://www.gnu.org/licenses/>.
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>kmotion</title>
<link href="base.css" rel="stylesheet" type="text/css" media="screen"/> 
<script type="text/javascript" src="js/FlashReplace.js"></script>

<script type="text/javascript" >

/* *****************************************************************************
Preload section. The images are held in an array so the browser will download 
them in the background ready for use and also not drop them from its cache.
***************************************************************************** */

function kmotion_preload_images() {

	// preload the images and store in global array
	preload_array = [];
	for (var i = 1; i < 55; i++) {
		preload_array[i] = new Image();
	}
	
	for (var i = 1; i < 13; i++) {
		preload_array[i].src = 'images/r' + i + '.png';
		preload_array[i + 12].src = 'images/b' + i + '.png';
		preload_array[i + 24].src = 'images/g' + i + '.png';
	}
	
	preload_array[37].src = 'images/bcam.png';	
	preload_array[38].src = 'images/gcam.png';
	preload_array[39].src = 'images/bcam_alt.png';	
	preload_array[40].src = 'images/gcam_alt.png';
	preload_array[41].src = 'images/temp3.png';
	preload_array[42].src = 'images/temp4.png';
	preload_array[43].src = 'images/config_divider.png';
	preload_array[45].src = 'images/divider.png';
	preload_array[46].src = 'images/divider_xl.png';
	preload_array[48].src = 'images/ncam.png';
	preload_array[49].src = 'images/blue.png';
	preload_array[50].src = 'images/green.png';
	preload_array[51].src = 'images/yellow.png';
	preload_array[52].src = 'images/red.png';
	preload_array[53].src = 'images/mask.png';
	preload_array[54].src = 'images/mask_trans.png';
};

</script>

</head>
<body onload="kmotion_preload_images();">

<div id="whole_display">

<!-- ***************************************************************************
'main_display' section.
*****************************************************************************-->

	<div id="main_display">
		<div id="info_mid_line">
			<div id="info_text" >
				<script type="text/javascript" >
					document.write('kmotion loading ...');
				</script>
			      <noscript>Please Enable JavaScript</noscript> 
			</div>
		</div>
	</div>

<!-- ***************************************************************************
'button_bar' section.
*****************************************************************************-->

	<div id="button_bar">
		<!-- div instead of span because of IE glitch -->
		<div id="title"><a href="http://kmotion.eu">kmotion</a></div>
		<span id="version_num"><a href="http://kmotion.eu">-- -- -- --</a></span>
		<span class="divider"><img src="images/divider.png" alt="" /> </span>
	
		<span class="header">Display Select</span>

		<div class="button_line">
			<img class="display_button" id="d1" src="images/g1.png" alt="" 
			onClick="KM.display_button_clicked(1);" />
			<img class="display_button" id="d2" src="images/g2.png" alt="" 
			onClick="KM.display_button_clicked(2);" />
			<img class="display_button" id="d3" src="images/g3.png" alt="" 
			onClick="KM.display_button_clicked(3);" />
			<img class="display_button" id="d4" src="images/g4.png" alt="" 
			onClick="KM.display_button_clicked(4);" />
		</div>

		<div class="button_line">
			<img class="display_button" id="d5" src="images/g5.png" alt="" 
			onClick="KM.display_button_clicked(5);" />
			<img class="display_button" id="d6" src="images/g6.png" alt="" 
			onClick="KM.display_button_clicked(6);" />
			<img class="display_button" id="d7" src="images/g7.png" alt="" 
			onClick="KM.display_button_clicked(7);" />
			<img class="display_button" id="d8" src="images/g8.png" alt="" 
			onClick="KM.display_button_clicked(8);" />
		</div>
	
		<div class="button_line">
			<img class="display_button" id="d9" src="images/g9.png" alt="" 
			onClick="KM.display_button_clicked(9);" />
			<img class="display_button" id="d10" src="images/g10.png" alt="" 
			onClick="KM.display_button_clicked(10);" />
			<img class="display_button" id="d11" src="images/g11.png" alt="" 
			onClick="KM.display_button_clicked(11);" />
			<img class="display_button" id="d12" src="images/g12.png" alt="" 
			onClick="KM.display_button_clicked(12);" />
		</div>

		<span class="divider"><img src="images/divider.png" alt="" /> </span>
		<span id="camera_func_header" class="header">Camera Select</span>
	
		<div class="button_line">
			<div id="cb1" class="camera_button" 
			onClick="KM.camera_func_button_clicked(1);"><span id="ct1">1</span></div>
			<div id="cb2" class="camera_button" 
			onClick="KM.camera_func_button_clicked(2);"><span id="ct2">2</span></div>
			<div id="cb3" class="camera_button" 
			onClick="KM.camera_func_button_clicked(3);"><span id="ct3">3</span></div>
			<div id="cb4" class="camera_button" 
			onClick="KM.camera_func_button_clicked(4);"><span id="ct4">4</span></div>
		</div>

		<div class="button_line">
			<div id="cb5" class="camera_button" 
			onClick="KM.camera_func_button_clicked(5);"><span id="ct5">5</span></div>
			<div id="cb6" class="camera_button" 
			onClick="KM.camera_func_button_clicked(6);"><span id="ct6">6</span></div>
			<div id="cb7" class="camera_button" 
			onClick="KM.camera_func_button_clicked(7);"><span id="ct7">7</span></div>
			<div id="cb8" class="camera_button" 
			onClick="KM.camera_func_button_clicked(8);"><span id="ct8">8</span></div>
		</div>

		<div class="button_line">
			<div id="cb9" class="camera_button" 
			onClick="KM.camera_func_button_clicked(9);"><span id="ct9">9</span></div>
			<div id="cb10" class="camera_button" 
			onClick="KM.camera_func_button_clicked(10);"><span id="ct10">10</span></div>
			<div id="cb11" class="camera_button" 
			onClick="KM.camera_func_button_clicked(11);"><span id="ct11">11</span></div>
			<div id="cb12" class="camera_button" 
			onClick="KM.camera_func_button_clicked(12);"><span id="ct12">12</span></div>
		</div>
	
		<div class="button_line">
			<div id="cb13" class="camera_button" 
			onClick="KM.camera_func_button_clicked(13);"><span id="ct13">13</span></div>
			<div id="cb14" class="camera_button" 
			onClick="KM.camera_func_button_clicked(14);"><span id="ct14">14</span></div>
			<div id="cb15" class="camera_button" 
			onClick="KM.camera_func_button_clicked(15);"><span id="ct15">15</span></div>
			<div id="cb16" class="camera_button" 
			onClick="KM.camera_func_button_clicked(16);"><span id="ct16">16</span></div>
		</div>

		<span class="divider"><img src="images/divider.png" alt="" /> </span>
		
		<div class="button_line">
			<div class="camera_button" onClick="KM.ptz_button_clicked(1);"><span id="p1">Lt</span></div>
			
			<div class="camera_button" onClick="KM.ptz_button_clicked(2);"><span id="p2">Up</span></div>
			
			<div class="camera_button" onClick="KM.ptz_button_clicked(3);"><span id="p3">Dn</span></div>
			
			<div class="camera_button" onClick="KM.ptz_button_clicked(4);"><span id="p4">Rt</span></div>
		</div>
			
		<span class="divider"><img src="images/divider.png" alt="" /> </span>
		<span class="header">Key Functions</span>
		
		<div class="button_line">
			<div class="function_button" 
			onClick="KM.function_button_clicked(1);"><span id="ft1">Live</span></div>
			<div class="function_button" 
			onClick="KM.function_button_clicked(2);"><span id="ft2">Archive</span></div>
		</div>
		
		<span class="divider"><img src="images/divider.png" alt="" /> </span>
		<span class="header">Misc Functions</span>
		
		<div class="button_line">
			<div class="function_button" 
			onClick="KM.function_button_clicked(3);"><span id="ft3">Logs</span></div>
			<div class="function_button" 
			onClick="KM.function_button_clicked(4);"><span id="ft4">Config</span></div>
		</div>
		
		<div class="button_line">
			<div id="fb5" class="function_button" 
			onClick="KM.function_button_clicked(5);"><span id="ft5">Func</span></div>
			<div class="function_button" 
			onClick="KM.function_button_clicked(6);"><span id="ft6">Msg</span></div>
		</div>
		
		<div class="button_line">
			<div class="function_button" 
			onClick="KM.function_button_clicked(7);"><span id="ft7">Panic</span></div>
			<div class="function_button" 
			onClick="KM.function_button_clicked(8);"><span id="ft8">Audible</span></div>
		</div>
		
		<div class="button_line">
			<div class="function_button" 
			onClick="KM.function_button_clicked(9);"><span id="ft9">About</span></div>
			<div class="function_button" 
			onClick="KM.function_button_clicked(10);"><span id="ft10">Logout</span></div>
		</div>
		
	</div>
	<script type="text/javascript" src="js/index.js"></script>
</div>
</body>
</html>
